<template>
    <portlet name="客户管理">
        <div class="search_content">
            <i-table :content="self" :columns="this.store.roll=='1'?columns1:columns2" :data="data1"></i-table>
            <i-table :show-header="false" :columns="columns3" :data="data3"></i-table>
        </div>
        <div class="search_footer">
            <span><Page @on-change='changePage' :total='pageInfor.records' :page-size='pageInfor.rows' :current='pageInfor.page' show-elevator show-sizer></Page></span>
        </div>
        <Modal
            v-if="modal1"
            :visible="true"
            title="公司信息"
            width='800'
            @on-ok="ok"
            @on-cancel="cancel">
            <com-infor-port :companycode='comCode'></com-infor-port>
        </Modal>
        <Modal
            v-if="modal2"
            :visible="true"
            title="已开通产品"
            @on-ok="ok"
            @on-cancel="cancel">
            <pur-pro-port :companyid='purInfor'></pur-pro-port>
        </Modal>
    </portlet>
</template>
<script>
    import Portlet from '../../components/portlet.vue';
    import comInforPort from './comInforPort.vue';
    import purProPort from './purProPort.vue';
    export default {
        components:{ Portlet,comInforPort,purProPort  },
        data () {
            return {
                self:this,
                pageInfor:{
                    page:1,
                    rows:10,
                    records:1,
                },
                columns1: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '公司名称',
                        key: 'company_name',
                        width:180,
                        align: 'center'
                    },
                    {
                        title: '公司编码',
                        key: 'company_no',
                        align: 'center'
                    },
                    {
                        title: '累计充值（元）',
                        key: 'money_chongzhi',
                        align: 'center'
                    },
                    {
                        title: '本月消费（元）',
                        key: 'money_xiaofei_month',
                       
                    },
                    {
                        title: '累计消费（元）',
                        key: 'money_xiaofei',
                       
                    },
                    {
                        title: '账户余额（元）',
                        key: 'money_yue',
                       
                    },
                    {
                        title: '操作',
                        key: 'money_xiaofei',
                        width:180,
                        render (row, column, index) {
                            return `<a @click='confirmCom(${index})'>公司信息</a>
                                    <a @click='confirmPro(${index})'>已开通产品</a>`;
                        }
                    },
                ],
                columns2: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '公司名称',
                        key: 'company_name',
                        width:180,
                        align: 'center'
                    },
                    {
                        title: '公司编码',
                        key: 'company_no',
                        align: 'center'
                    },
                    {
                        title: '累计充值（元）',
                        key: 'money_chongzhi',
                        align: 'center'
                    },
                    {
                        title: '本月消费（元）',
                        key: 'money_xiaofei_month',
                       
                    },
                    {
                        title: '累计消费（元）',
                        key: 'money_xiaofei',
                       
                    },
                    {
                        title: '账户余额（元）',
                        key: 'money_yue',
                       
                    },
                    {
                        title: '操作',
                        key: 'money_xiaofei',
                        width:180,
                        render (row, column, index) {
                            return `<a @click='confirmCom(${index})'>公司信息</a>
                                    <a @click='confirmPro(${index})'>已开通产品</a><br/>
                                    <a @click='confirmPro(${index})'>已开通产品</a>`;
                        }
                    },
                ],
                columns3: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '公司名称',
                        key: 'company_name',
                        width:180,
                        align: 'center',

                    },
                    {
                        title: '公司编码',
                        key: 'company_no',
                        align: 'center'
                    },
                    {
                        title: '累计充值（元）',
                        key: 'money_chongzhi',
                        align: 'center'
                    },
                    {
                        title: '本月消费（元）',
                        key: 'money_xiaofei_month',
                       
                    },
                    {
                        title: '累计消费（元）',
                        key: 'money_xiaofei',
                       
                    },
                    {
                        title: '账户余额（元）',
                        key: 'money_yue',
                       
                    },
                    {
                        title: '操作',
                        width:180,
                        key: '',
                    },
                ],
                data1: [
                   
                ],
                modal1:false,
                comCode:'',
                modal2:false,
                purInfor:''
            }
        },
        computed:{
            data3(){
                let dataT=[];
                dataT[0]={};
                dataT[0].company_name='总计';
                dataT[0].money_chongzhi=0;
                dataT[0].money_xiaofei_month=0;
                dataT[0].money_xiaofei=0;
                dataT[0].money_yue=0;
                for(let i=0;i<this.data1.length;i++){
                    if(!isNaN(this.data1[i].money_chongzhi)){
                        dataT[0].money_chongzhi=dataT[0].money_chongzhi+parseFloat(this.data1[i].money_chongzhi);
                    }
                    if(!isNaN(this.data1[i].money_xiaofei_month)){
                        dataT[0].money_xiaofei_month=dataT[0].money_xiaofei_month+parseFloat(this.data1[i].money_xiaofei_month);
                    }
                    if(!isNaN(this.data1[i].money_xiaofei)){
                        dataT[0].money_xiaofei=dataT[0].money_xiaofei+parseFloat(this.data1[i].money_xiaofei);
                    }
                    if(!isNaN(this.data1[i].money_yue)){
                        dataT[0].money_yue=dataT[0].money_yue+parseFloat(this.data1[i].money_yue);
                    }
                }
                return dataT;
            }
        },
        methods: {
            changePage(a){
                this.pageInfor.page=a;
                this.getData();
            },
            toUse(row){
                this.myRouter.go({ path:this.data2[row].sendUrl});
            },
            changeStartDate(a){
                this.day.startDateD=a.toString();
            },
            changeEndDate(a){
                this.day.endDateD=a.toString();
            },
            searchData(){
                this.getData();
            },
            confirmCom(index){
                this.comCode=this.data1[index].company_no;
                this.modal1=!this.modal1;
            },
            confirmPro(index){
                this.purInfor=this.data1[index].company_no;
                this.modal2=!this.modal2;
            },
            ok() {
                this.modal1=false;
                this.modal2=false;
            },
            cancel () {
                this.modal1=false;
                this.modal2=false;
            },
            getData(){
                this.$http.jsonp(this.path+'company/companyDownServlet/CompanylistByRole',{
                    params:{page:this.pageInfor.page,
                            rows:this.pageInfor.rows,},
                    jsonp:'callback'
                }).then(
                    (datas)=>{
                        if(datas.body.code=='001'){
                            this.pageInfor.page=parseInt(datas.body.result.page);
                            this.pageInfor.records=datas.body.result.records;
                            this.data1=datas.body.result.rows;
                        }else if(datas.body.code=='002'){
                            this.$Message.success('提交信息出错p!');
                        }else if(datas.body.code=='997'||datas.body.code=='998'){
                            this.store.state.user.companyId=null;
                            this.store.state.user.companyName=null;
                            this.store.state.allInfor=null;
                            this.$Message.error('登陆超时或未登陆,请登陆!');
                            this.myRouter.go({path:'/login'});
                        }
                    },
                    (error)=>{
                        this.$Message.success('网络问题!');
                    }   
                );
            }
        },
        ready(){
            this.$nextTick(()=>{
                this.getData();
         })
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/scss">
    @import '../../styles/query.scss';
</style>